<template>
  <dv-border-box-1 style="height:100%">
    <div id="border">
      <span v-if="!isDialog" style="float:right;margin-right:40px;margin-top:10px">
        <el-button style="float:right" icon="el-icon-plus" type="primary" circle @click="handleAdd"></el-button>
      </span>
      <el-table
        highlight-current-row
        @current-change="clickCurrentChange"
        max-height="480"
        :data="list.filter(data => !search || data.rname.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="权限编号" prop="pid"></el-table-column>

        <el-table-column label="权限名" prop="pname"></el-table-column>
        <el-table-column label="描述" prop="pdesc"></el-table-column>
        <el-table-column  align="right" width="250">
          <template slot="header" slot-scope="scope">
            <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
          </template>
          <template v-if="!isDialog" slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              icon="el-icon-edit"
              plain
              @click="handleEdit(scope.row.pid)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-remove"
              @click="handleDelete(scope.row.pid)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 编辑标签Dialog -->
      <el-dialog title="权限编辑" :visible.sync="dialogFormVisible" width="400px">
        <el-form
          :model="pojo"
          ref="pojoForm"
          :rules="rules"
          label-position="right"
          label-width="100px"
          size="mini"
        >
          <el-form-item v-if="!isAddPermission" label="编号" prop="pid">
            <el-input readonly width="60px" v-model="pojo.pid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="权限名称" prop="pname">
            <el-input :readonly="isAddPermission?false:true" width="60px" v-model="pojo.pname" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="描述" prop="pdesc">
            <el-input width="60px" v-model="pojo.pdesc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="pojo.pid===null?addPermission('pojoForm'):updateData('pojoForm')"
          >{{this.pojo.pid===null?'添加':'修改'}}</el-button>
        </div>
      </el-dialog>
    </div>
  </dv-border-box-1>
</template>
<script>
import permissionApi from "@/api/permissions";
export default {
  props: {
    isDialog: Boolean
  },
  data() {
    return {
      isAddPermission: false, //是否为添加权限
      dialogFormVisible: false, //权限编辑窗口
      pojo: {
        pid: null,
        pname: "",
        pdesc: ""
      },
      rules: {
        pname: [{ required: true, message: "权限名不能为空", trigger: "blur" }],
        pdesc: [
          { required: true, message: "请添加适当的描述", trigger: "blur" }
        ]
      },
      list: [],
      search: ""
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      permissionApi.getList().then(resp => {
        const respData = resp.data;
        if (respData.flag) {
          this.list = respData.data;
        } else {
          this.$message({
            type: "warning",
            message: respData.message
          });
        }
      });
    },
    /**
     * 打开编辑窗口
     */
    handleEdit(pid) {
      this.handleAdd();
      this.isAddPermission = false;

      permissionApi.getById(pid).then(resp => {
        const respData = resp.data;
        if (respData.flag) {
          this.pojo = respData.data;
        } else {
          this.$message({
            type: "warning",
            message: respData.message
          });
        }
      });
    },
    /**
     * 修改权限
     */
    updateData() {
      this.$refs.pojoForm.validate(valid => {
        if (valid) {
          permissionApi.update(this.pojo).then(resp => {
            if (resp.data.flag) {
              this.$message({
                type: "success",
                message: resp.data.message
              });
              this.fetchData()
              this.dialogFormVisible = false;
            } else {
              this.$message({
                type: "warning",
                message: resp.data.message
              });
            }
          });
        }
      });
    },
    /**
     * 打开编辑窗口
     */
    handleAdd() {
      this.dialogFormVisible = true;
             this.isAddPermission = true; //是添加权限
      this.$nextTick(() => {
        this.$refs["pojoForm"].resetFields();
      });
    this.pojo.pid=null
      console.log(this.pojo.pid)
    },
    /**
     * 删除权限
     */
    handleDelete(pid) {
      this.$confirm("确定删除该权限吗?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          permissionApi.delete(pid).then(resp => {
            this.$message({
              type: resp.data.flag ? "success" : "error",
              message: resp.data.message
            });
            if (resp.data.flag) {
              this.fetchData();
            }
          });
        })
        .catch(() => {
          return;
        });
    },
    /**
     * 添加权限
     */
    addPermission() {
      console.log("222");
      this.$refs.pojoForm.validate(valid => {
        if (valid) {
          permissionApi.addPermission(this.pojo).then(resp => {
            if (resp.data.flag) {
              this.$message({
                type: "success",
                message: resp.data.message
              });
              this.fetchData();
              this.dialogFormVisible = false;
            } else {
              this.$message({
                type: "warning",
                message: resp.data.message
              });
            }
          });
        } else {
          if (this.pojo.pname === "") {
            this.$message({
              type: "warning",
              message: "权限不能为空"
            });
          } else if (this.pojo.pdesc === "") {
            this.$message({
              type: "warning",
              message: "请对权限添加合适的描述"
            });
          }
        }
      });
    },
    /**
     * 点击某行后触发该方法
     */
    clickCurrentChange(currentRow) {
      //点击后将数据传递到父组件（文章管理），触发父组件的option-category，父组件可以在option-category这个事件对应的处理函数中接收数据
      this.$emit("option-permission", currentRow);
    }
  }
};
</script>